<template>
  <Header :title="address"/>
  <van-address-edit
    :area-list="areaList"
    :address-info="addressInfo"
    show-delete
    show-set-default
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
  />

</template>

<script>
import { Toast } from "vant"
import { computed,onMounted, reactive, toRefs } from "vue"
import { useRoute,useRouter } from "vue-router"
import { useStore } from "vuex"
import Header from "../../components/Header"
export default {
  components: {
    Header
  },
  setup(){
    const store = useStore()
    const route = useRoute()
    const router = useRouter()

    let data = reactive({
      areaList: {
        province_list:{
          110000:'广东省',
          120000: '浙江省'
        },
        city_list:{
          110100:'广州市',
          110200:'深圳市',
          120100:'杭州市',
          120200:'宁波市'
        },
        county_list:{
          110101:'天河区',
          110102:'海珠区',
          120102:'上城区',
          130102:'下城区'
        }
      },
      addressInfo:{}
    })

    const address = computed(()=>{
        return route.query.type === "add"?"地址新增":"地址编辑"
    })

    function init () {
      store.state.userAddress.forEach((item) => {
        if( item.id === route.query.id){
          data.addressInfo = item
        } 
      })
    }
    onMounted(() => {
      init()
    })

// 保存的按钮
    function onSave(content){
      if(route.query.type==="add"){
        store.commit('ADDADDRESS',content)
      } else {
        store.commit('CHANGEADDRESS',content)
      }
      Toast("保存成功")
      setTimeout(()=>{
        router.back()
      },1000)
    }
// 删除的按钮
    function onDelete(content){
      store.commit('DELETEADDRESS',content)
      Toast('删除成功')
      setTimeout(()=>{
        router.back()
      },1000)
    }

    return {
      ...toRefs(data),
      onSave,
      onDelete,
      address
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger{
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on{
  background-color: #ffc400;
}
</style>